/* 移动端响应式样式 */

/* 重置样式 */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 通用响应式样式 */
@media (max-width: 767px) {
  /* 调整文本大小 */
  body {
    font-size: 14px;
    overflow-x: hidden;
    width: 100%;
  }
  
  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.3rem;
  }
  
  /* 确保所有容器都有适当的边距 */
  .container, 
  .content-container, 
  .page-container {
    padding: 12px;
    margin-bottom: 15px;
    width: 100%;
  }
  
  /* 按钮更大以便于触摸 */
  button, 
  .btn, 
  input[type="submit"], 
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 15px;
  }
  
  /* 输入框更大以便于触摸和输入 */
  input, 
  textarea, 
  select {
    font-size: 16px; /* 防止iOS缩放 */
    padding: 12px;
  }
  
  /* 表格响应式处理 */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
  }
  
  /* 图片自适应容器 */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* 弹出框和模态框调整 */
  .modal, 
  .popup, 
  .dialog {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
  }
  
  /* 调整内容间距 */
  .row, 
  .col {
    margin: 5px 0;
  }
  
  /* 隐藏某些在移动端不必要的元素 */
  .desktop-only {
    display: none !important;
  }
  
  /* 显示移动端专用元素 */
  .mobile-only {
    display: block !important;
  }
  
  /* 移动端卡片样式优化 */
  .card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
  }
  
  /* 移动端导航菜单样式 */
  .mobile-menu {
    position: fixed;
    z-index: 1000;
  }
}

/* 平板设备响应式样式 */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 平板专属样式 */
  .tablet-only {
    display: block !important;
  }
  
  body {
    font-size: 15px;
  }
  
  /* 其他平板样式调整 */
}

/* 确保移动导航栏下方内容有足够距离 */
.has-mobile-navbar {
  padding-top: 60px;
}

/* 通用工具类 */
.text-center-mobile {
  text-align: center !important;
}

.w-100-mobile {
  width: 100% !important;
}

.mb-10-mobile {
  margin-bottom: 10px !important;
}

.hidden-mobile {
  display: none !important;
}

@media (min-width: 768px) {
  .hidden-mobile {
    display: initial !important;
  }
  
  .mobile-only {
    display: none !important;
  }
}

/* 修复移动端溢出问题 */
html, body {
  max-width: 100%;
  overflow-x: hidden;
} 